<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="10">
        <tr>
            <th>标题</th>
            <th>冷笑话</th>
        </tr>
    </table>
    <script>
        //获取元素
        let tbody = document.querySelector("table")
        function ajaxTool(method,url,data,cb){
            //method表示方法
            //url表示请求地址
            //data表示传进来的对象
            //cb表示回调函数
            const xhr = new XMLHttpRequest();
            //开始四步走，创建xhr
            let a = ""
            for(const key in data){
                a += `${key}=${data[key]}&`;
            }
            let newUrl = url + "?" + a.slice(0,-1);
            //a是装后面参数(param参数)
            //newUrl才是最终的请求地址
            xhr.open(method,newUrl)
            xhr.send()
            xhr.onload = function(){
                if(xhr.status === 200){
                    cb(JSON.parse(xhr.responseText));
                }
            }
        }
        let res = {
            type:"冷笑话",
            pageindex:1,
            pagesize:2
        }//配置对象
        ajaxTool("GET","https://api.gugudata.com/news/joke/demo",res,function(joke){
            console.log(joke.Data[0].Title);//标题
            console.log(joke.Data[0].Content);//内容
            joke.Data.forEach(item=>{
                //item是每一个笑话
                console.log(item);
                tbody.innerHTML += `
                <tr>
                    <td>${item.Title}</td>
                    <td>${item.Content}</td>
                </tr>
                `
            })
        })
    </script>
</body>

</html>